<template>
	<view :class="vision_show == true?'vision_view':'vision_view_false'">
		<view :class="vision_show == true?'vision_view_view':'vision_view_false'">
			<view class="vision_view_view_title">
				{{system_vision.system_important == true ? '版本重大更新':'普通更新'}}
			</view>
			<view class="vision_view_view_detail">
				<view class="vision_view_view_detail_list" v-for="(item,index) in system_vision.system_detai">
					{{item}}
				</view>
			</view>
			<view class="vision_view_view_progress" v-if="progress">
				<view class="vision_view_progress">
					<view class="vision_view_progress_absolite" :style="'width:'+ progress_width + '%'"></view>
				</view>
				<view class="vision_view_progress_number">
					进度{{progress_width}}%
				</view>
			</view>
			<view class="updata_btn">
				<button class="updata_btn_cancel" @click="cancal()" v-if="system_vision.system_important == false">下次再说</button>
				<button class="updata_btn_confrim" @click="update()" v-if="!progress">立即更新</button>
				<button class="updata_btn_confrim" @click="installApk()" v-if="progress_width == 100">立即安装</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return{
				vision_show: false,
				progress: false,
				progress_width:0,
				installApkUrl:"",
				system_vision: {}
			}
		},
		created() {
			this.appVision();
		},
		methods:{
			async appVision(){
				let res = await api.uniCloudApi(api.publicFun.obtain_system,{system_name:'app_vision'});
				res[0].system_detai = res[0].system_detai.split('；')
				this.system_vision = res[0];
				if(res){
					this.compare();
				}
			},
			update(){
				let that = this;
				that.progress = true;
				// 创建下载任务
				const downLoadTask = uni.downloadFile({
					url:that.system_vision.system_downLoad,
					header: {
						'Access-Control-Allow-Origin':'*'
					},
					success(res) {
						if(res.statusCode === 200){
							that.installApkUrl = res.tempFilePath
						}
					},
					complete(e){
						console.log(e)
					}
				})
				//监听下载进度
				downLoadTask.onProgressUpdate(function(res){
					that.progress_width = res.progress
				});
			},
			cancal(){
				this.vision_show = false;
				uni.showTabBar()
			},
			installApk(){
				//打开下载好的安装包
				plus.runtime.openFile(this.installApkUrl);
			},
			compare(){
				//检测系统版本和当前版本的一致性
				let that = this
				plus.runtime.getProperty(plus.runtime.appid, async widgetInfo => {
					console.log(that.system_vision.system_number)
					console.log(widgetInfo.version)
					console.log(that.system_vision.system_number > widgetInfo.version)
					if(that.system_vision.system_number > widgetInfo.version ){
						that.vision_show = true
						uni.hideTabBar()
					}
				});
				
			}
		}
	}
</script>

<style>
	.vision_view{
		position: fixed;
		top: 0;
		background-color: rgba(0,0,0,0.1);
		width: 100vw;
		height: 100vh;
	}
	.vision_view_view{
		width: 80%;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 10%;
		bottom: 40%;
	}
	.vision_view_view_title{
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		background-color: #e81311;
		border-radius: 20rpx 20rpx 0 0;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	.vision_view_view_detail{
		width: 90%;
		margin-left: 5%;
	}
	.vision_view_view_detail_list{
		line-height: 80rpx;
	}
	.vision_view_view_progress{
		width: 100%;
		height: 20rpx;
		display: flex;
	}
	.vision_view_progress{
		width: 70%;
		margin-left: 5%;
		height: 10rpx;
		line-height: 10rpx;
		margin-top: 5rpx;
		background-color: #999999;
		border-radius: 5rpx;
		position: relative;
	}
	.vision_view_progress_absolite{
		position: absolute;
		bottom: 0;
		height: 10rpx;
		border-radius: 5rpx;
		background-color: #FF3333;
	}
	.vision_view_progress_number{
		width: 20%;
		text-align: right;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 20rpx;
	}
	.updata_btn{
		width: 92%;
		margin-left: 4%;
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
	}
	.updata_btn_cancel,
	.updata_btn_confrim{
		height: 55rpx;
		line-height: 55rpx;
		margin-top: 7.5rpx;
		font-size: 27rpx;
		border-radius: 27.5rpx;
		color: #FFFFFF;
		border: 0;
	}
	.updata_btn_cancel,
	.updata_btn_confrim::after{
		border: 0;
		border-radius: 27.5rpx;
	}
	.updata_btn_cancel{
		background-color: #007AFF;
	}
	.updata_btn_confrim{
		background-color: #e81311;
	}
	.vision_view_false{
		display: none;
	}
</style>
